<template>
	<view
		style="margin-top: 223rpx;height: 100%;width: 92rpx;display: flex;flex-direction: column;align-items: center;background-color: #f9f9f9;">
		<view v-for="(time, index) in timeline"
			style="color:#9e9ea3;font-size:28rpx;position: relative;display: flex;justify-content: center;align-items: center;width: 100%;"
			:key="index" v-bind:style="{ height: each_height + 'rpx' }" @click="showExactTime(index)">
			<view :class="time.show_exact ? 'show_mask_ani' : 'hide_mask_ani'"
				style="display: flex;flex-direction: column;align-items: center;justify-content: space-between;height: 70%;position: absolute;left: 0;width: 100%;top: 15%;opacity: 0;">
				<view style="height: 20rpx;display: flex;align-items: center;">{{ time.begin_time }}</view>
				<view style="height: 20rpx;display: flex;align-items: center;">-</view>
				<view style="height: 20rpx;display: flex;align-items: center;">{{ time.end_time }}</view>
			</view>
			<view :class="time.show_exact ? 'hide_mask_ani' : 'show_mask_ani'" style="opacity: 1;">
				{{ index + 1 }}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:'timeLine',
		props:{
			each_height:Number
		},
		data() {
			return {
				timeline: [{
						index: 0,
						begin_time: '08:30',
						end_time: '09:15',
						show_exact: false
					},
					{
						index: 1,
						begin_time: '09:25',
						end_time: '10:10',
						show_exact: false
					},
					{
						index: 2,
						begin_time: '10:30',
						end_time: '11:15',
						show_exact: false
					},
					{
						index: 3,
						begin_time: '11:25',
						end_time: '12:10',
						show_exact: false
					},
					{
						index: 4,
						begin_time: '14:30',
						end_time: '15:15',
						show_exact: false
					},
					{
						index: 5,
						begin_time: '15:25',
						end_time: '16:10',
						show_exact: false
					},
					{
						index: 6,
						begin_time: '16:30',
						end_time: '17:15',
						show_exact: false
					},
					{
						index: 7,
						begin_time: '17:25',
						end_time: '18:10',
						show_exact: false
					},
					{
						index: 8,
						begin_time: '19:00',
						end_time: '19:45',
						show_exact: false
					},
					{
						index: 9,
						begin_time: '19:55',
						end_time: '20:40',
						show_exact: false
					},
					{
						index: 10,
						begin_time: '20:50',
						end_time: '21:35',
						show_exact: false
					},
					{
						index: 11,
						begin_time: '21:45',
						end_time: '22:30',
						show_exact: false
					}
				],
			}
		},
		methods: {
			showExactTime(index) {
				var item = this.timeline[index];
				item.show_exact = !item.show_exact;
			},
		}
	}
</script>

<style>
	.show_mask_ani {
		animation: start 0.2s forwards;
	}

	.hide_mask_ani {
		animation: stop 0.2s forwards;
	}
	@keyframes start {
		0% {
			opacity: 0;
		}
	
		100% {
			opacity: 1;
		}
	}
	@keyframes stop {
		0% {
			opacity: 1;
		}
	
		100% {
			opacity: 0;
		}
	}
</style>
